<template>
	<view class=" flex flex_column uselogin">
		<image src="../../../static/log0.png" mode="" class="logo"></image>
		<p class="title">注册</p>
		<view class="padding26">
			<u--form :model="form" :rules="rules" ref="ruleForm" class="demo-ruleForm-login">
				<u-form-item prop="phone" class="u-form-item-login">
					<u-input prefixIcon="phone" v-model="form.phone" class="u-input-login" placeholder="请输入手机号">
					</u-input>
				</u-form-item>
				<u-form-item prop="code" class="u-form-item-login">
					<u-input prefixIcon="checkbox-mark" v-model="form.code" placeholder="请输入验证码">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="x秒重新获取"></u-code>
							<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item prop="password" class="u-form-item-login" v-if="!passwordAble">
					<u-input prefixIcon="lock-fill" v-model="form.password" class="u-input-login" placeholder="请设置登陆密码"
						password>
						<template slot="suffix">
							<u-icon v-show="form.password" name="eye-fill" @click="passwordAble=true"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item prop="password" class="u-form-item-login" v-if="passwordAble">
					<u-input prefixIcon="lock-fill" v-model="form.password" class="u-input-login" placeholder="请设置登陆密码">
						<template slot="suffix">
							<u-icon v-show="form.password" name="eye-off" @click="passwordAble=false"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item prop="passwords" class="u-form-item-login" v-if="!passwordAble1">
					<u-input prefixIcon="lock-fill" v-model="form.passwords" class="u-input-login" placeholder="请在次输入密码"
						password>
						<template slot="suffix">
							<u-icon v-show="form.passwords" name="eye-fill" @click="passwordAble1=true"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item prop="passwords" class="u-form-item-login" v-if="passwordAble1">
					<u-input prefixIcon="lock-fill" v-model="form.passwords" class="u-input-login"
						placeholder="请在次输入密码">
						<template slot="suffix">
							<u-icon v-show="form.passwords" name="eye-off" @click="passwordAble1=false"></u-icon>
						</template>
					</u-input>
				</u-form-item>
			</u--form>

			<view class="login-btn">
				
				<u-button  class="btn-size btn-b" type="primary" @click="resect()">注册</u-button>
				<view class="flex" style="justify-content: center;margin-top: 8px;">
					<!-- <el-checkbox v-model="checked">
						<p class="login-footer-p" @click="goShow()">登录代表同意 <text>《服务协议》</text> 及 <text>《隐私协议》</text>
						</p>
					</el-checkbox> -->
					<u-checkbox-group v-model="checked">
						<view class="flex">
							<u-checkbox></u-checkbox>
							<text class="login-footer-p login-btn-p" @click="goShow()">注册代表同意 <text>《服务协议》</text> 及
								<text>《隐私协议》</text>
							</text>
						</view>
					</u-checkbox-group>
				</view>
				<!-- <p class="login-btn-p" @click="userLogin()" v-if="type==1">直接登录</p> -->
				<p class="login-btn-p" style="margin-top: 8px;" @click="userLogins()"><text>已有账号？</text>去登录</p>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		get_reg_sms,
		person_register,
		checkPhoneUnique,
	}
	from "@/api/login"
	export default {
		data() {
			var checkPhone = (rule, value, callback) => {
				if (!value) {
					return callback(new Error("手机号不能为空"));
				} else {
					const reg = /^1[3-9][0-9]\d{8}$/;
					// 这里定义的reg变量没有加引号，所以是一种特殊的数据类型，即正则，可以直接用test()方法
					if (reg.test(value)) {
						callback();
					} else {
						// 具体错误信息没有提示
						return callback(new Error("请输入正确的手机号"));
					}
				}
			};
			return {
				checked: [],
				passwordAble: false,
				passwordAble1: false,
				tips: '',
				value: '',
				show: true,
				text: '获取验证码',
				type: 0,
				count: 60,
				title: "",
				placeholder: "",
				error: false,
				form: {
					phone: "",
					password: "",
					code: "",
				},
				password: "password",
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					}, {
						validator: checkPhone,
						trigger: "blur"
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					},
					{ min: 5, max: 20, message: '密码长度在 5 到 20 个字符', trigger: 'blur' }],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}],
					passwords: [{
						required: true,
						message: '请再次输入密码',
						trigger: 'blur'
					},{ min: 5, max: 20, message: '密码长度在 5 到 20 个字符', trigger: 'blur' }]
				}
			};
		},
		onLoad(option) {
			this.type = option.id
		},
		methods: {
			codeChange(text) {
				// console.log("验证码：",text);
				// this.form.code=text
				this.tips = text;
			},
			getCode() {
				this.$refs.ruleForm.validateField("phone", (res) => {
					console.log(res);
					if (res.length==0&&this.form.phone) {
						if (this.$refs.uCode.canGetCode) {
							// 模拟向后端请求验证码
							uni.showLoading({
								title: '正在获取验证码'
							})
							setTimeout(() => {
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
								let obj = {
									phonenumber: this.form.phone
								}
								get_reg_sms(obj).then(res => {
									console.log(res.msg);
									if (res.code == 200) {
										uni.$u.toast('验证码已发送');
									} else {
										uni.$u.toast(res.msg);
									}

								})
							}, 1000);
						} else {
							uni.$u.toast('倒计时结束后再发送');
						}
					} else {
						// uni.$u.toast('请输入手机号');
					}
				})

			},
			change(e) {
				console.log('change', e);
			},
			goShow() {
				uni.navigateTo({
					url: "/pages/login/service/service",
				})
			},
			resect() {
				// this.$refs.ruleForm.validate((valid) => {
					
				// })
				// return
				this.$refs.ruleForm.validate().then(valid => {
					if (this.checked.length == 0) {
						uni.$u.toast(`请先勾选同意服务协议和隐私协议`)
						return
					}
					if (valid) {
						if (this.form.password != this.form.passwords) {
							uni.showToast({
								title: "两次密码不一致",
								icon: 'error'
							})
							return
						}
						checkPhoneUnique(this.form.phone).then(res => {
							if (res.data) {
								let params = {
									"clientId": "eeb9377d4b6debbc0a6e8756bbbbb4c7",
									"grantType": "phonePassword",
									"tenantId": "000001",
									"password": this.form.password,
									"phonenumber": this.form.phone,
									"smsCode": this.form.code,
									"userType": "application_user"
								}
								person_register(params).then(res => {
									console.log(res.data);
									if (res.code == 200) {
										uni.showToast({
											title: res.msg,
											icon: 'success'
										})
										setTimeout(() => {
											uni.navigateTo({
												url: "/pages/login/login"
											})
										}, 500)
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'error'
										})
									}

								})
							} else {
								uni.showToast({
									title: "手机号已注册",
									icon: 'error'
								})
							}



						}).catch((res => {
							uni.showToast({
								title: res.msg,
								icon: 'error'
							})
							return
						}))
					}
				})

			},

			userLogins() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}

		}
	}
</script>
<style lang="scss">
	::v-deep .el-form-item__error {
		position: absolute;
		top: 50px;
	}
</style>

<style lang="scss" scoped>
	.uselogin {
		.logo {
			// margin-top: 44px;
			margin-bottom: 24px;
			width: 100%;
			height: 25vh;
			border-radius: 12px 12px 12px 12px;
		}

		.input-s-div {
			width: 100%;
			position: relative;
			right: 0;
			height: 100%;

			.input-t {
				position: absolute;
				right: 15px;
				top: 0px;
				font-size: 14px;
				font-family: 'HarmonyOS Sans SC-Regular, HarmonyOS Sans SC';
				font-weight: 400;
				color: #2F6CBC
			}
		}

		// width: 100%;
		// height: 100%;
		.login-btn {
			margin-top: 32px;
			width: 100%;
		}

		// .logo {
		// 	margin-top: 44px;
		// 	margin-bottom: 24px;
		// 	width: 72px;
		// 	height: 72px;
		// 	border-radius: 12px 12px 12px 12px;
		// }

		.title {
			margin-bottom: 24px;
			text-align: center;
			font-size: 24px;
			font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
			font-weight: 400;
			color: #3D3D3D;
		}

		.input {
			width: 100%;
			position: relative;

			.el-input {
				margin-top: 16px;
				border-bottom: 1px solid #eeeff3;
				border: none;
				height: 40px;
			}



			.el-input__inner {
				border: none;
				border-bottom: 1px solid #eeeff3;
			}


			.input-p {
				line-height: 20px;
				position: absolute;
				// width: 120px;
				height: 20px;
				font-size: 12px;
				font-family: 'HarmonyOS Sans SC-Regular, HarmonyOS Sans SC';
				font-weight: 400;
				color: #FF7474;
			}
		}

		.password {
			position: relative;

			.el-icon-view {
				position: absolute;
				top: 20px;
				right: 0;
			}
		}

		.forget {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 40px;
			height: 16px;
			font-size: 12px;
			font-family: 'HarmonyOS Sans SC-Regular, HarmonyOS Sans SC';
			font-weight: 400;
			color: #646466;
			// background-color: #1C53D9;
		}

		.uselogin {
			margin-top: 20px;
			width: 115px;
			height: 30px;
			border-radius: 17px 17px 17px 17px;
			opacity: 1;
			border: 1px solid #1C53D9;
			font-size: 14px;
			font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
			font-weight: 400;
			color: #1C53D9;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.btn-size {
			width: 100%;
			height: 48px;
			margin-bottom: 22px;
		}

		.login-footer {
			position: absolute;
			bottom: 46px;

			.login-footer-p {
				font-size: 11px;
				font-family: 'PingFangSC-Regular-Regular, PingFangSC-Regular';
				font-weight: 400;
				color: #646466;
				text-align: center;

				text {
					color: #1C53D9;
				}
			}
		}

		.login-btn-p {
			text {
				color: #8B8B8B;
			}

			text-align: center;
			font-size: 14px;
			font-family: 'HarmonyOS Sans SC-Regular, HarmonyOS Sans SC';
			font-weight: 400;
			color: #2F6CBC;
		}
	}
</style>
